<template>
  <n-layout class="root">
    <n-layout embedded content-style="padding: 0 30px;" class="top">
      <n-text>首页</n-text>
    </n-layout>
    <n-layout embedded content-style="padding: 20px 30px;" class="content">
      <div class="head">
        <div class="A">
          <p class="A1">用户注册数</p>
          <div class="A2">

          </div>
          <div class="A3">
            <p class="A4"><span class="A4-1">本日</span> <span class="A4-2">本周</span> <span class="A4-3">本月</span></p>
            <p class="A5"><span class="A5-1">0</span> <span class="A5-2">0</span> <span class="A5-3">0</span></p>
          </div>
        </div>
        <div class="B">
          <p class="B1">职位发布数</p>
          <div class="B2">

          </div>
          <div class="B3">
            <p class="A4"><span class="A4-1">本日</span> <span class="A4-2">本周</span> <span class="A4-3">本月</span></p>
            <p class="A5"><span class="A5-1">0</span> <span class="A5-2">0</span> <span class="A5-3">0</span></p>
          </div>
        </div>
        <div class="C">
          <p class="C1">职位投递数</p>
          <div class="C2">

          </div>
          <div class="C3">
            <p class="A4"><span class="A4-1">本日</span> <span class="A4-2">本周</span> <span class="A4-3">本月</span></p>
            <p class="A5"><span class="A5-1">0</span> <span class="A5-2">0</span> <span class="A5-3">0</span></p>
          </div>
        </div>
      </div>
      <div class="Foo">
        <p class="W">分型浏览数状图</p>
        <div class="M">

        </div>
        <div class="q">

        </div>
      </div>
    </n-layout>
    <n-layout embedded content-style="padding-top: 50px" class="foot">
      <n-icon size="16" class="icon1">
        <CopyrightCircleOutlined />
      </n-icon>
      2024 中信银行实习平台
    </n-layout>
  </n-layout>
</template>
<script setup>

import {CopyrightCircleOutlined} from "@vicons/antd";
</script>
<style>
.top{
//border: 1px solid black;
  height: 10%;
  font-size: 20px;
  font-weight: bold;
  padding-top: 15px;
}
.icon1{
  position: relative;
  top: 2px;
}
.foot{
//border: 1px solid black;
  height: 15%;
  text-align: center;
}
.content{
//border: 1px solid black;
  min-height: 75%;
}
.root{
//border: 1px solid red;
  height: 100%;
}
.head{
  height: 30%;
  display: flow;
}
.A{
  float: left;
  width: 32%;
  height:170px;
  background: #FFFFFF;
}
.B{
  float: left;
  width: 32%;
  margin-left:2.1% ;
  height: 170px;
  background: #FFFFFF;
}
.C{
  float: right;
  width: 32%;
  height:170px;
  background: #FFFFFF;
}
.Foo{
  height: 505px;
  margin-top: 15%;
  background: #FFFFFF;

}
.W{
  padding-top: 20px;
  padding-left: 25px;
  font-size: 18px;

}
.M{
  background: #F5F7F9;
  height: 1px;
}
.A1{
  margin-top: 20px;
  margin-left: 25px;
  font-size: 18px;
}
.A2{
  background: #F5F7F9;
  height: 1px;
}
.A3{
  padding-top: 5px;
  padding-left:20px ;
}
.A4-1{
  padding-left: 17%;
}
.A4-2{
  padding-left: 18%;
}
.A4-3{
  padding-left: 19%;
}

.A5{
  font-size: 20px;
}
.A5-1{
  padding-left: 14%;
}
.A5-2{
  padding-left: 18%;
}
.A5-3{
  padding-left: 19%;
}

.B1{
  margin-top: 20px;
  margin-left: 25px;
  font-size: 18px;
}
.B2{
  background: #F5F7F9;
  height: 1px;
}
.B3{
  padding-top: 5px;
  padding-left:20px ;
}

.C1{
  margin-top: 20px;
  margin-left: 25px;
  font-size: 18px;
}
.C2{
  background: #F5F7F9;
  height: 1px;
}
.C3{
  padding-top: 5px;
  padding-left:20px ;
}
</style>